<template lang="pug">
  .login-module
    .login-content
      .flex-row(style="marginTop: 20px")
        .left-tip 用户名
        input(:class="{'error-border': usernameError}", placeholder="用户名", v-model="username")
      .flex-row
        .left-tip 密码
        input(:class="{'error-border': passwordError}", type="password", placeholder="密码", v-model="password", maxlength=16)
      .tip-row
        .error-tip {{errorTip}}
        .auto-login
          input(type="checkbox", id="auto-login-checkbox", v-model="autoLogin", maxlength=16)
          label(for="auto-login-checkbox")
          | 自动登录
      .btn-login
        .btn(@click="login") 登录
</template>

<script>
import qs from 'qs'

export default {
  data () {
    return {
      username: '',
      password: '',
      errorTip: '',
      usernameError: false,
      passwordError: false
    }
  },
  // inject: ['reload'],
  methods: {
    async login () {
      if (!this.username) {
        this.errorTip = '用户名不能为空'
        this.usernameError = true
        return
      }
      if (!this.password) {
        this.errorTip = '密码不能为空'
        this.passwordError = true
        return
      }
      const {result} = (await this.$http.post('/doLogin', qs.stringify({
        username: this.username,
        password: this.password
      }))).data
      if (result) {
        this.$router.push('/user')
      }
      this.$router.push('/loginone')
    }
  },
  watch: {
    username () {
      this.usernameError = false
      this.errorTip = ''
    },
    password () {
      this.passwordError = false
      this.errorTip = ''
    }
  }
}
</script>

<style scoped lang="stylus">
  .login-module
    width 100%
    height 100%
    background-image url("../assets/img/login-bg.jpg")
    background-size 100% 100%
    background-repeat no-repeat
  .login-content
    width 500px
    height 300px
    position absolute
    left 50%
    top 50%
    margin-left -250px
    margin-top -150px
    background-color rgba(0, 0, 0, 0.6)
    border-radius 10px
  .flex-row
    display flex
    height 80px
    width 100%
    justify-content center
    align-items center
    input
      height 40px
      width 320px
      outline 0
      border 1px solid #fff
      padding 0 10px
      border-radius 5px
  .left-tip
    width 80px
    text-align justify
    text-align-last justify
    text-justify inter-ideograph
    color #fff
    margin-right 20px
  .tip-row
    height 30px
    padding 0 30px
    display flex
    justify-content space-between
  .error-tip
    color red
  .auto-login
    height 100%
    display flex
    align-items center
    color #fff
    input
      margin 0
      padding 0
      cursor pointer
      height 0
      width 0
      visibility hidden
  #auto-login-checkbox +label
    display inline-block
    width 20px
    height 20px
    cursor pointer
    background-color #fff
    margin-right 5px
  #auto-login-checkbox:checked +label::before
    display inline-block
    content "\2714"
    color white
    text-align center
    margin-top -1
    height 21px
    width 21px
    line-height 21px
    background #66ccff
  .btn-login
    width 100%
    height 90px
    display flex
    justify-content center
    align-items center
  .btn
    width 100px
    height 40px
    line-height 40px
    color #fff
    background-color #66ccff
    border-radius 20px
    text-align center
    cursor pointer
  .error-border
    border 1px solid red !important
</style>
